<template>
   
  <div class="execution">
    <basic-container>
      <!-- <el-card class="operate-container" shadow="never">
        <el-button
          class="btn-add"
          icon="el-icon-plus"
          type="primary"
          @click="addApp()"
          size="mini"
        >
          添加
        </el-button>
      </el-card> -->
      <div style="margin-top: 10px">
        <el-table
          :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
          :data="list"
        >
          <el-table-column label="平台id" align="center" prop="platformId">
          </el-table-column>
          <el-table-column label="app类型" prop="type" align="center">
            <template slot-scope="scope">{{
              scope.row.type | typeFilter
            }}</template>
          </el-table-column>
          <el-table-column
            label="版本号"
            prop="versionCode"
            align="center"
          ></el-table-column>
          <el-table-column
            label="版本名字"
            prop="versionName"
            align="center"
          ></el-table-column>
          <el-table-column label="是否强制更新" align="center">
            <template slot-scope="scope">{{
              scope.row.forceUpdate | newestFilter
            }}</template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="更新内容"
            prop="updateContent"
            align="center"
          ></el-table-column>
          <el-table-column
            label="下载地址"
            prop="downloadUrl"
            align="center"
          ></el-table-column>
          <el-table-column
            label="app大小"
            prop="appSize"
            align="center"
          ></el-table-column>

          <!-- <el-table-column
            label="极光appkey"
            prop="jgAppkey"
            align="center"
          ></el-table-column>

          <el-table-column
            label="极光Secret"
            prop="jgSecret"
            align="center"
          ></el-table-column>

          <el-table-column
            label="极光私钥"
            prop="jgPrivateKey"
            align="center"
          ></el-table-column> -->

          <el-table-column
            label="更新时间"
            prop="updateTime"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="handleUpdate(scope.$index, scope.row)"
                type="text"
                icon="el-icon-edit"
                >修改</el-button
              >
              <el-button
                size="small"
                @click="handleRemove(scope.$index, scope.row)"
                type="text"
                icon="el-icon-edit"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :current-page.sync="listQuery.current"
          :page-size="listQuery.size"
          :page-sizes="[5, 10, 15]"
          :total="total"
        >
        </el-pagination>
      </div>
    </basic-container>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <el-form :model="queryForm" :rules="rules" ref="queryForm">
        <el-form-item label="平台" prop="platformId">
          <el-select
            v-model="queryForm.platformId"
            placeholder="请选择"
            :disabled="disabled"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="APP类型" prop="type">
          <el-radio-group v-model="queryForm.type" :disabled="disabled">
            <el-radio :label="1">Android</el-radio>
            <el-radio :label="2">IOS</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="版本名字" prop="versionName">
          <el-input
            size="mini"
            style="width: 240px"
            v-model="queryForm.versionName"
            placeholder="请输入版本号,如:0.1.0"
          ></el-input>
        </el-form-item>

        <el-form-item label="版本号" prop="versionCode">
          <el-input
            size="mini"
            style="width: 240px"
            v-model="queryForm.versionCode"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item label="极光appkey" prop="jgAppkey">
          <el-input
            size="mini"
            style="width: 240px"
            v-model="queryForm.jgAppkey"
          ></el-input>
        </el-form-item>
        <el-form-item label="极光Secret" prop="jgSecret">
          <el-input
            size="mini"
            style="width: 240px"
            v-model="queryForm.jgSecret"
          ></el-input>
        </el-form-item>
        <el-form-item label="极光私钥" prop="jgPrivateKey">
          <el-input
            size="mini"
            style="width: 240px"
            v-model="queryForm.jgPrivateKey"
          ></el-input>
        </el-form-item> -->

        <el-form-item label="是否强制更新" prop="forceUpdate">
          <el-radio-group v-model="queryForm.forceUpdate">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="下载地址"
          prop="downloadUrl"
          v-if="queryForm.type === 2"
        >
          <el-input
            size="mini"
            style="width: 240px"
            v-model="queryForm.downloadUrl"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="上传apk"
          v-if="queryForm.type === 1"
          prop="downloadUrl"
        >
          <el-upload
            class="upload-demo"
            action="https://www.mlshangpin.com/api/api-file/files-anon"
            :on-preview="handlePreview"
            ref="upload"
            :multiple="false"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-success="handleUploadSuccess"
            :on-exceed="handleExceed"
          >
            <el-button size="mini" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="app大小" prop="appSize">
          <el-input
            size="mini"
            style="width: 240px"
            v-model="queryForm.appSize"
          ></el-input
        ></el-form-item>
        <el-form-item label="备注" prop="updateContent">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="更新内容"
            v-model="queryForm.updateContent"
          >
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="handleQueryForm('queryForm')"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { appPage, addApp, appUpdate, removeApp } from "@/api/config/index";
import { platformAll } from "@/api/rms/rmsstore";
import { isVersion } from "@/util/validate";

const defaultQueryForm = {
  platformId: null,
  type: 1,
  versionCode: null,
  versionName: null,
  forceUpdate: 1,
  downloadUrl: null,
  appSize: null,
  updateContent: null,
  jgAppkey: null,
  jgSecret: null,
  jgPrivateKey: null
};

export default {
  data() {
    var checkVersion = (rule, value, callback) => {
      if (!isVersion(value)) {
        callback(new Error("请输入正确的版本号"));
      } else {
        callback();
      }
    };
    return {
      list: [],
      total: 0,
      listQuery: {
        current: 1,
        size: 10,
      },
      queryForm: Object.assign({}, defaultQueryForm),
      rules: {
        platformId: [
          { required: true, message: "请选择平台", trigger: "change" },
        ],
        type: [{ required: true, message: "请选择类型", trigger: "change" }],

      },
      title: "添加",
      options: [],
      dialogVisible: false,
      disabled: false,
    };
  },
  filters: {
    typeFilter(value) {
      if (value === 1) {
        return "Android";
      } else if (value === 2) {
        return "IOS";
      }
    },
    newestFilter(value) {
      if (value === 1) {
        return "是";
      } else if (value === 2) {
        return "不是";
      }
    },
    businessFilter(value) {
      if (value === 1) {
        return "港百惠";
      } else if (value === 2) {
        return "叶山";
      }
    },
  },
  created() {
    this.getList();
  },
  methods: {
    getPlatformAll() {
      platformAll().then((res) => {
        this.options = res.data.data;
      });
    },
    handleRemove(file, fileList) {
      this.emitInput("");
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleUploadSuccess(res, file) {
      this.queryForm.downloadUrl = res.data.url;
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      appPage(this.listQuery).then((res) => {
        this.list = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    addApp() {
      this.title = "添加";
      this.dialogVisible = true;
      this.getPlatformAll();
    },
    handleUpdate(index, row) {
      this.title = "编辑";
      this.dialogVisible = true;
      this.disabled = true;
      this.queryForm = Object.assign({}, row);
      this.getPlatformAll();
      this.queryForm.id = row.id;
    },
    handleQueryForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == "编辑") {
            appUpdate(this.queryForm).then((res) => {
              this.dialogVisible = false;
              this.disabled = false;
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                  duration: 1000,
                });
                this.getList();
                this.queryForm = Object.assign({}, defaultQueryForm);
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                  duration: 1000,
                });
              }
            });
          } else {
            addApp(this.queryForm).then((res) => {
              console.log(res.data);
              this.dialogVisible = false;
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                  duration: 1000,
                });
                this.getList();
                this.queryForm = Object.assign({}, defaultQueryForm);
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                  duration: 1000,
                });
              }
            });
          }
        }
      });
    },
    handleRemove(index, row) {
      let that = this;
      that
        .$confirm("是否确认删除ID为" + row.id, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(function () {
          removeApp({ id: row.id }).then((res) => {
            if (res.data.code === 200) {
              that.$message({
                message: res.data.msg,
                type: "success",
                duration: 1000,
              });
              that.getList();
            } else {
              that.$message({
                message: res.data.msg,
                type: "warning",
                duration: 1000,
              });
            }
          });
        });
    },
  },
};
</script>
<style scoped>
.btn-switch {
  text-align: center;
  margin-left: 50%;
}
</style>
